<script setup lang="ts">
    import Test from './test.vue'
</script>
<template>
    <ul class="tabs">
        <li class="tabItem">
            <Test></Test>
        </li>
    </ul>
    <pre>
        1. reactive() \ isReactive()
            reactive()函数用于创建一个深层响应式对象或数组
                const obj = reactive({a:1,b:2})
                const arr = reactive([1,2])

            reactive()主要针对于引用值，对原始值无效
                const num = reactive(1)  //返回原始值、无响应性
                const str = reactive("字符串")  //返回原始值、无响应性
                const isShow = reactive(true)  //返回原始值、无响应性

            reactive()传入一个reactive()创建的响应式对象则会返回参数本身
                const obj1 = reactive({a:1,b:2})
                const obj2 = reactive(obj1)
                console.log(obj1 === obj2)
            
            reactive()创建的响应式对象变量从新赋值会和原来的原始数据失去活性连接
                const obj1 = reactive({a:1,b:2})
                obj1 = {a:1,b:2}
                obj1 = reactive({a:1,b:2})

            reactive()创建的响应式对象变量可以嵌套任何类型数据以及reactive()和ref(),嵌套后的都具备响应性

            isReactive()函数用于检查一个对象是否是由reactive()创建的一个代理对象

        2. ref() \ isRef()
            ref()函数用于创建返回一个响应式变量  
                const num = reactive(1)  
                const str = reactive("字符串") 
                const isShow = reactive(true)  

            ref()主要针对于原始值数据，也适用于任意类型数据值,当传入的是对象、数组等引用类型的值时会自动调用reactive()转换一道
                const obj1 = ref({a:1,b:2})

            ref对象解包
                因为es6的Proxy代理方法不支持代理监听原始值的get和set特性。
                ref()返回的是一个经过一层对象包装后的响应式变量，所以取值的时候需要通过.value方式, 
                const show = ref(true) //console.log(show.value === true)
                const num = ref(0) //console.log(num.value === 0)
                const str = ref('字符串') //console.log(str.value === '字符串')

                ref作为顶层属性在html模板里面使用是不需要.value的,用于html模板里面时vue会自动解包。
                ref作为非顶层属性时只有作为单纯的文本插值才会自动解包
                    
                

            isRef()函数用于检查某个值是否为 ref
         
        3. unref() \ toValue()

        4. toRef() \ toRefs()
    </pre>
</template>